var vue = new Vue({
    el: '#app',
    data:{
        isCollapse: false,
        menus: [],
        mainPath:'',
        screenWidth: document.body.clientWidth,
        screenHeight: document.body.clientHeight,
        userName : '',

        tabs:[],
        tabActiveValue:'',
    },
    created: function () {
        this.showUserName();
        this.loadMenu();
    },
    mounted: function () {
        var that = this;
        window.onresize = function () {
            return (function () {
                window.screenWidth = document.body.clientWidth;
                window.screenHeight = document.body.clientHeight;
                that.screenWidth = window.screenWidth;
                that.screenHeight = window.screenHeight;
            })()
        }
    },
    computed: {
        sideWidth: function () {
            return this.isCollapse ? '65px' : '200px';
        },
        mainHeight: function () {
            return (this.screenHeight - 70) + 'px';
        },
        mainWidth: function () {
            return this.screenWidth - (this.isCollapse ? 85 : 200) + 'px';
        },
    },
    methods: {
        loadMenu: function () {
            var self = this;
            $.ajax({
                url:  constant.ROOT_SITE + '/system/menu/listbyuser',
                success: function (result) {
                    if (result.code === 200) {
                        self.menus = result.body;
                    }
                }
            })
        },
        onMenuClick:function (menu) {
            var self =this;
            var isExist = false;
            this.tabs.forEach((item, index, arr) => {
                if (item.menuName === menu.menuName) {
                    isExist = true;
                }
            });
            this.tabActiveValue = menu.menuName;
            if(!isExist){
                this.tabs.push(menu);
            }
            this.mainPath = constant.ROOT_SITE + menu.url;
        },
        showUserName : function () {
            var user = getUserInfo();
            this.userName = user.orgName +','+user.nickName;
        },
        logout : function () {
            delCookie(constant.TOKEN_NAME);
            localStorage.removeItem(constant.USER_INFO);
            toLogin();
        },
        removeTab:function (menuName) {
            let tabs = this.tabs;
            let activeName = this.tabActiveValue;
            if (activeName === menuName) {
                tabs.forEach((tab, index) => {
                    if (tab.menuName === menuName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.menuName;
                        }else {
                            toHome();
                        }
                    }
                });
            }
            this.tabActiveValue = activeName;
            this.tabs.forEach((item, index, arr) => {
                if (item.menuName === menuName) {
                    arr.splice(index, 1)
                }
            });
            this.showByTabName(activeName);
        },
        clickTab:function (tab) {
            this.showByTabName(tab.label);
        },
        showByTabName(tabName){
            let self = this;
            this.tabs.forEach((item, index, arr) => {
                if (item.menuName === tabName) {
                    self.mainPath = constant.ROOT_SITE + item.url;
                }
            });
        }
    }
});